<template>
    <div class="login">
        <div class="title">登录</div>
        <div class="form-item">
            <div class="item-title">请输入您的邮箱*</div>
            <el-input v-model="email" placeholder="请输入您的邮箱"></el-input>
        </div>
        <div class="form-item">
            <div class="item-title">请输入您的密码*</div>
            <el-input type="password" v-model="password" placeholder="请输入您的密码"></el-input>
        </div>
        <div class="form-item">
            <div class="item-title">请输入验证码*</div>
            <el-input v-model="checkCode" placeholder="请输入验证码"></el-input>
        </div>
        <div class="form-item">
            <div @click="newCode" class="checkCode">{{checkCodeData}}</div>
            <div @click="checkForm" class="form-btn">登录</div>
            <div class="noemail">还没有帐号? <a @click="registerJump" href="javascript:;">注册</a></div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from '@vue/composition-api';
import axios from 'axios';
export default {
    setup (props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000'; 

        onMounted(() => {
            getCheckCode();
        })

        // 表单数据
        const formParams = reactive({
            email: '',
            password: '',
            checkCode: '',
        });

        // 跳转到注册页面
        const registerJump = function () {
            context.parent.$router.push('/register');
        }

        // 密码验证规则
        let checkPassword = /^[a-zA-Z0-9]{5,18}$/i;
        // 邮箱验证规则
        let checkEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        // 验证码
        let checkCodeData = ref('');

        // 获取验证码
        const getCheckCode = async function () {
            let { data: res } = await axios.get('/get/checkcode');

            if (res.status != 200)
                return context.parent.$message.error('获取验证码失败，请重试尝试');
            checkCodeData.value = res.checkCode;
        }

        // 切换验证码
        const newCode = function () {
            getCheckCode();
        }

        // 登录前验证
        const checkForm = function () {
            if (!checkPassword.test(formParams.password))
                return context.parent.$message.error('只能是下划线、数字、字母');
            if (!checkEmail.test(formParams.email))
                return context.parent.$message.error('邮箱格式不对');
            if (formParams.checkCode != checkCodeData.value)
                return context.parent.$message.error('验证码不正确');
            submitForm();
        }

        // 提交注册表单
        const submitForm = async function () {
            let { data: res } = await axios.post('/user/login', formParams);
            if (res.status != 200)
                return context.parent.$message.error(res.msg);
            context.parent.$message.success(res.msg);
            window.localStorage.setItem('token', res.token);
            setTimeout(() => {
                context.parent.$router.push('/home');
            }, 2000)
        }

        const methods = { registerJump, newCode, checkForm }

        return {
            ...methods,
            ...toRefs(formParams),
            checkCodeData
        }

    }
}
</script>

<style lang="less" scoped>
.login {
    padding: 0 .533333rem;
}

.title {
    font-size: 1.333333rem;
    font-weight: 700;
    margin-top: .8rem;
    margin-bottom: .666667rem;
}

.form-item {
    margin-bottom: .666667rem;
    .item-title {
        font-size: .666667rem;
        color: #4b4b4b;
        font-weight: 700;
        margin-bottom: .4rem;
    }
    .checkCode {
        width: 4rem;
        height: 1.866667rem;
        line-height: 1.866667rem;
        text-align: center;
        font-weight: 700;
        font-size: .88rem;
        color: #fff;
        background-color: #988477;
        letter-spacing: .106667rem;
        border-radius: .266667rem;
    }
    .form-btn {
        width: 100%;
        height: 1.866667rem;
        line-height: 1.866667rem;
        text-align: center;
        font-weight: 700;
        color: #fff;
        font-size: .88rem;
        border-radius: .266667rem;
        background-color: #1a8eed;
        margin-top: .666667rem;
    }
    .noemail {
        margin-top: .266667rem;
        text-align: center;
        font-size: .666667rem;
    }
}
</style>